<!-- 个人信息 -->
<template>
    <view class="">
        <view class="userData">
            <u-avatar size="80" src="https://cdn.uviewui.com/uview/album/1.jpg"></u-avatar>
            <view class="userName">某某某</view>
            <view class="userName user">账号：1234</view>
            <view class="userName user user2">地址：1234</view>
        </view>


        <u-cell-group>
            <u-cell title="设置备注名" :isLink="true" size="large" @click="remarkShow = true">
                <text slot="value">某人</text>
            </u-cell>
            <u-cell title="设置描述" :isLink="true" size="large" @click="remarkShow = true">
                <text slot="value"></text>
            </u-cell>
            <u-cell title="昵称" size="large">
                <text slot="value">某某某</text>
            </u-cell>
            <u-cell title="出生日期" size="large">
                <text slot="value">1999/99/99</text>
            </u-cell>
            <u-cell title="个性签名" size="large">
                <text slot="value">红红火火恍恍惚惚</text>
            </u-cell>
            <u-cell title="二维码" :isLink="true" size="large">
                <u-icon slot="value" name="scan" size="28" color="#585858"></u-icon>
            </u-cell>
        </u-cell-group>
        <u-button text="发消息" type="primary" style="position: fixed;bottom: 30px;" @click="pageUrl"></u-button>

        <!-- 添加备注 -->
		<u-modal :show="remarkShow" title="请输入备注名称" :showCancelButton="true" @cancel="remarkShow = false">
			<view class="slot-content">
				<u-input></u-input>
			</view>
		</u-modal>

        <!-- 下拉框 -->
        <view class="more" :class="{ more2: isShow, more3: !isShow }">
            <view class="more-item" @click="blockShow = true">
                <u-icon name="warning-fill" style="display: inline-block;" color="#fff" size="28"></u-icon>
                <text>拉黑好友</text>
            </view>
            <u-line></u-line>
            <view class="more-item" @click="deleteShow = true">
                <u-icon name="trash-fill" style="display: inline-block;" color="#fff" size="28"></u-icon>
                <text>删除好友</text>
            </view>
        </view>

        <!-- 删除好友 -->
        <u-modal @cancel="deleteShow = false" :show="deleteShow" title="删除好友" content='是否删除该好友？'
            :showCancelButton="true"></u-modal>

        <!-- 拉黑好友 -->
        <u-modal @cancel="blockShow = false" :show="blockShow" title="拉黑好友" content='是否拉黑该好友'
            :showCancelButton="true"></u-modal>

    </view>
</template>

<script>
export default {
    data() {
        return {
            remarkShow: false,
            isShow: false,
            deleteShow: false,
            blockShow: false,
        }
    },
    onLoad() {
        // this.loadmore()
    },
    methods: {
        close() {
            this.remarkShow = false
            // console.log('close');
        },
        onNavigationBarButtonTap(e) {
            // console.log(e)
            this.isShow = !this.isShow
        },
        pageUrl() {
            uni.navigateTo({
                url: '../index',
                animationType: 'pop-in',
                animationDuration: 300
            })
        }
    },
}
</script>

<style lang="scss">
.userData {
    width: 100%;
    margin: 10px 15px;

    .u-avatar {
        display: inline-block;
        margin: auto;
    }

    .userName {
        position: absolute;
        font-size: 19px;
        margin-left: 10px;
        // margin-top: -10px;
        display: inline-block;
        // width: 50%;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
    }

    .user {
        margin-top: 30px;
        font-size: 15px;
        color: #4d4d4d;
    }

    .user2 {
        margin-top: 55px;
    }
}

.u-cell-group {
    margin-top: 20px;
}

.more {
    width: 120px;
    background-color: rgb(77, 77, 77);
    position: fixed;
    border-radius: 10px;
    /* #ifdef APP-PLUS */
    top: 0px;
    /* #endif */
    /* #ifdef H5 */
    top: 44px;
    /* #endif */
    right: 5px;
    z-index: 99;

    .more-item {
        padding: 20rpx;

        text {
            float: right;
            margin-top: 5rpx;
            color: #fff;
        }
    }
}

.more2 {
    transition-duration: 0.5s;
    transform: translateY(0px);
}

.more3 {
    transition-duration: 0.5s;
    transform: translateY(-500px);
}
</style>